<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.js"></script>
</head>

<body>
<div>
    <label>输入设备</label>
    <select id="audioSource"></select>
</div>
<div>
    <label>输出设备</label>
    <select id="audioOutput"></select>
</div>
<div>
    <label>视屏输入设备</label>
    <select id="videoSource"></select>
</div>

<script>

    (async function () {
        // 获取元素
        let audioSource = document.querySelector("#audioSource");
        let audioOutput = document.querySelector("#audioOutput");
        let videoSource = document.querySelector("#videoSource");
        // 获取媒体信息
        let devices = navigator.mediaDevices.enumerateDevices();
        console.log(devices)

        if (devices == null) {
            alert("对不起媒体信息不支持")
        } else {
            devices.then(gotDevices)
                .catch(handleError);
        }

        function gotDevices(devicesInfo) {

            // 对于所有设备开始获取遍历
            devicesInfo.forEach(function (deviceInfo) {
                console.log(deviceInfo.kind +
                    ": 名称 = " + deviceInfo.label +
                    ": 设备id  = " + deviceInfo.deviceId +
                    ": 设备groupid = " + deviceInfo.groupId);

                var option = document.createElement('option');
                option.html = deviceInfo.label;
                option.value = deviceInfo.deviceId;

                if (deviceInfo.kind == 'audioinput') {
                    audioSource.appendChild(option);
                } else if (deviceInfo.kind == 'audiooutput') {
                    audioOutput.appendChild(option);
                } else if (deviceInfo.kind == 'videoinput') {
                    videoSource.appendChild(option);
                }
            })

        }
    })();


    // 错误的时候发生的信息
    function handleError(err) {
        console.log(err.name + "--" + err.message);
    }
</script>
</body>

</html>